<template>
  <!-- 外层div容器，包含评论的样式类 -->
  <div class="comment p-3 mb-2 bg-light border rounded">
    <!-- 显示评论用户的用户名 -->
    <h5>{{ comment.user }}</h5>
    <!-- 显示评论内容 -->
    <p>{{ comment.text }}</p>
  </div>
</template>

<script>
export default {
  // 定义组件的名称
  name: 'Comment',
  // 通过props传递数据
  props: {
    // 接收一个对象类型的comment属性
    comment: Object,
  },
};
</script>

<style scoped>
/* 为评论容器定义样式，使其文本左对齐 */
.comment {
  text-align: left;
}
</style>
